<template>
  <div class="form">
    <!-- logo台头 -->
    <div class="header">
      <div class="icon">
      <img src="@/assets/images/book.svg" alt="">
      <span>我们一起背单词吧！</span>
      </div>
      <RouterLink :to="{path: '../word', query: {name: this.$route.query.name }}"
       class="floatR">
        <i class="iconfont">&#xe7c6;</i>
      </RouterLink>
      <div class="floatR" @click="prev()"><i class="iconfont">&#xe81a;</i></div>
    </div>
    <!-- 单词书名 -->
    <div class="title">
      <div style="font-weight:500">
        {{this.$route.query.name}}—-第{{this.$route.query.index}}课
        <span>没有选中的单词不会进行测试哦</span>
      </div>
      <div style="float:right; margin-right:8px; color:rgb(119, 119, 119) ">
      </div>
    </div>
    <!-- 本课的单词列出来 -->
    <div style="height:400px">
      <router-view></router-view>
    </div>
    <!-- 视图区域 -->

  </div>
</template>
<script>
export default {
  name: 'courseForm',
  components: {

  },
  methods: {
    prev () {
      this.$router.go(-1)
    }
  },
  created () {
  }
}
</script>
<style scoped lang="less">
.form{
  background: white;
  margin: 0 auto;
  height: 600px;
  width: 800px;

  border-radius: 1%;
  .title{
    width: 800px;
    height: 40px;
    line-height: 40px;
    padding-left: 40px;
    border-bottom:1px solid rgb(198, 197, 197) ;
    span{
      font-family: '钉钉进步体';
      color: rgb(198, 197, 197) ;
      font-size: 5px;
    }
  }
  .header{
    border-radius:5px 5px 0px 0px;
    width: 800px;
    padding-left: 1px;
    padding-right: 1px;
    height: 40px;
    background-color: #3e87e5;
    .icon{
      position: relative;
      padding-left: 40px;
      height: 40px;
      float: left;
      line-height: 40px;
      font-size: 16px;
      img{
        height: 24px;
        position: absolute;
        left:10px;
        top: 8px;
      }
      span{
        color: white;
        font-weight: 100;
        font-family:'宋体';
      }
    }
    .iconfont{
      font-size: 24px;
    }
    .floatR /deep/{
      line-height: 40px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      margin-right:16px ;
      float: right;
      color: white;
      &:hover{
        .iconfont{
          font-size: 30px;
        }
      }
    }
  }
}
</style>
